body,html{
	width: 100%;
	height: 100%;
}
.canvas_wrap{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3200;
	display: none;
	#render{
		width: 100%;
		height: 100%;
		touch-action: none;
	}
}
.loading_wrap{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3200;
	background-image: url(../img/loading/bg.jpg);
	img{
		position: absolute;
	}
	.loading_logo{
		width: 4.59rem;
		left: 50%;
		margin-left: -2.295rem;
		top: 2rem;
	}
	.loading_text{
		width: 1.77rem;
		left: 50%;
		margin-left: -0.885rem;
		top: 7.5rem;
	}
	.loading_bear{
		width: 3.31rem;
		right: 0rem;
		bottom: 2rem;
	}
}
.video_wrap{
	width: 100%;
	height: 100%;
	position: relative;
	#door{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.video_play{
		width: 2.85rem;
		height: auto;
		position: absolute;
		left: 50%;
		margin-left: -1.425rem;
		bottom: 2rem;
	}
}

// 默认隐藏所有内容
.photo{
	display: none;
}
.bear_wrap{
	display: none;
}
.prize_wrap{
	display: none;
}
.prize_step1{
	display: none;
}
.prize_step1_wrap{
	display: none;
}
.backtime_wrap{
	display: none;
}
.prizer_wrap{
	display: none;
}

.body{
	width: 100%;
	height: 28.03rem;
	overflow: hidden;
	position: relative;
	background-image: url(../img/bg.jpg);
	img{
		position: absolute;
		height: auto;
	}
	.photo{
		width: 100%;
		height: 5.46rem;
		position: absolute;
		top: 0;
		left: 0;
		.swiper_tip{
			width: 2.38rem;
			left: 50%;
			margin-left: -1.19rem;
			top: 1rem;
			z-index: 99;
			pointer-events: none;
		}
		.swiper_arrow_wrap{
			width: 6.93rem;
			height: 0.38rem;
			position: absolute;
			left: 50%;
			margin-left: -3.465rem;
			top: 2.5rem;
			z-index: 120;
			pointer-events: none;
			.swiper_arrow{
				position: relative;
				height: 0.38rem;
			}
			.swiper_arrow_left{
				float: left;
			}
			.swiper_arrow_right{
				float: right;
			}
		}
		.photo_wrap{
			width: 100%;
			height: 4.4rem;
			margin-top: 1.2rem;
			.swiper-slide{
				width: 7.5rem;
				height: 4.4rem;
				.swiper_bg{
					width: 100%;
				}
				.swiper_cover{
					position: absolute;
					width: 1.23rem;
					height: 1.23rem;
					object-fit: contain;
				}
				.swiper_cover1{
					top: 0.53rem;
					left: 1.3rem;
					transform: rotate(-6deg);
					-webkit-transform: rotate(-6deg);
				}
				.swiper_cover2{
					top: 0.85rem;
					left: 3.25rem;
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
				}
				.swiper_cover3{
					top: 0.6rem;
					left: 5.06rem;
					transform: rotate(5deg);
					-webkit-transform: rotate(5deg);
				}
				.swiper_cover4{
					top: 2.6rem;
					left: 1.74rem;
					transform: rotate(-8deg);
					-webkit-transform: rotate(-8deg);
				}
				.swiper_cover5{
					top: 2.65rem;
					left: 4.58rem;
					transform: rotate(15deg);
					-webkit-transform: rotate(15deg);
				}
			}
		}
	}
	.video_wrap{
		width: 6.92rem;
		height: 7.37rem;
		background-image: url(../img/video_bg.png);
		position: absolute;
		left: 50%;
		margin-left: -3.46rem;
		top: 5.33rem;
		.player#player-con{
			width: 6.32rem;
			height: 3.57rem;
			position: absolute;
			left: 50%;
			margin-left: -3.16rem;
			top: 2.49rem;
		}
		.light{
			width: 0.54rem;
			z-index: 800;
			top: 2.18rem;
		}
		.light1{
			left: 1.05rem;
		}
		.light2{
			right: 1.05rem;
		}
		.video_btn_wrap{
			width: 5.52rem;
			height: 1.05rem;
			position: absolute;
			left: 50%;
			margin-left: -2.76rem;
			bottom: 0;
			.video_btn{
				width: 2.46rem;
				top: 0.2rem;
			}
			.video_btn1{
				left: 0;
			}
			.video_btn2{
				right: 0;
			}
			.video_btn3{
				right: 0;
				display: none;
			}
		}
	}
	
	.bear_wrap{
		width: 100%;
		height: 2.14rem;
		position: absolute;
		top: 13.09rem;
		left: 0;
		background-image: url(../img/bear_bg1.png);
		background-size: 100% auto;
		background-position: 0rem -2.6rem;
		background-repeat: no-repeat;
		.bear_icon{
			width: 1.75rem;
			left: 0.28rem;
			top: 0;
		}
		.naifen_icon{
			width: 0.97rem;
			top: 0.74rem;
			right: 0.85rem;
		}
		.no_wrap{
			width: 2.79rem;
			height: 1.01rem;
			position: absolute;
			left: 50%;
			margin-left: -1.385rem;
			bottom: 0.57rem;
			.text_shandow{
				width: 3.01rem;
				left: -0.09rem;
				bottom: -0.09rem;
			}
			.no_title{
				width: 1.61rem;
				left: 50%;
				margin-left: -0.805rem;
				top: 0;
			}
			.number_wrap{
				width: 100%;
				height: 0.45rem;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -1.395rem;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.num_text{
					height: 0.45rem;
					position: relative;
					margin: 0 0.02rem;
				}
			}
		}
	}
	
	.prize_wrap{
		width: 100%;
		height: 12.8rem;
		position: absolute;
		left: 0;
		top: 15.23rem;
		.plate_wrap_left{
			width: 4.55rem;
			height: 1.41rem;
			position: absolute;
			left: 0;
			background-image: url(../img/plate1.png);
		}
		.plate_wrap_right{
			width: 4.04rem;
			height: 1.41rem;
			position: absolute;
			right: 0;
			background-image: url(../img/plate2.png);
		}
		.plate_wrap1{
			top:3rem;
			.camera{
				width: 3.17rem;
				bottom: 0.7rem;
			}
		}
		.plate_wrap2{
			top: 5rem;
			.erji{
				width: 2.58rem;
				bottom: 1rem;
				left: 0.5rem;
			}
		}
		.plate_wrap3{
			top: 7rem;
			.xinglixiang{
				width: 2.58rem;
				bottom: 0.9rem;
				left: 0.5rem;
			}
		}
		.plate_wrap4{
			top: 9rem;
			.naifen2{
				width: 2.96rem;
				bottom: 1rem;
				left: 0.6rem;
			}
		}
		.plate_wrap5{
			top: 11rem;
			.hongbao{
				width: 2.83rem;
				bottom: 1rem;
				left: 0.5rem;
			}
		}
	}
}
// 第一阶段
.body.phased1{
	height: 18.81rem;
	.prize_step1{
		display: block;
		width: 100%;
		height: 6.64rem;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url(../img/step1/prize_stage.png);
		.prize_step1_camera{
			width: 2.31rem;
			left: 2rem;
			bottom: 1.2rem;
			z-index: 150;
		}
		.prize_step1_erji{
			width: 1.57rem;
			left: 1.7rem;
			bottom: 1.7rem;
			z-index: 120;
		}
		.prize_step1_xinglixiang{
			width: 1.87rem;
			left: 0.3rem;
			bottom: 1.7rem;
			z-index: 100;
		}
		.prize_step1_naifen{
			width: 1.97rem;
			bottom: 1.7rem;
			right: 1.95rem;
			z-index: 120;
		}
		.prize_step1_hongbao{
			width: 1.64rem;
			bottom: 1.7rem;
			right: 0.6rem;
			z-index: 100;
		}
	}
	.video_wrap{
		top: 6.1rem;
		z-index: 1800;
		.video_btn_wrap{
			.video_btn2{
				display: none;
			}
			.video_btn3{
				display: block;
				right: 0;
			}
		}
	}
	.prize_step1_wrap{
		display: block;
		width: 7.5rem;
		height: 6.12rem;
		background-image: url(../img/step1/bottom_bg.png);
		position: absolute;
		z-index: 100;
		left: 0;
		bottom: 0;
		.prize_step1_tip{
			width: 4.49rem;
			left: 50%;
			margin-left: -2.245rem;
			top: 1.44rem;
		}
		.prize_step1_shandow{
			width: 1.71rem;
			left: 50%;
			margin-left: -0.855rem;
			bottom: 2.2rem;
		}
		.prize_step1_bear{
			width: 1.58rem;
			left: 0.8rem;
			bottom: 1.8rem;
		}
		.prize_step1_naifenguan{
			width: 0.97rem;
			right: 1.2rem;
			bottom: 1.8rem;
		}
		.prize_step1_num_wrap{
			width: 3.54rem;
			height: 0.34rem;
			position: absolute;
			left: 50%;
			margin-left: -1.77rem;
			bottom: 0.5rem;
			.prize_step1_num_title{
				width: 1.49rem;
				left: 0;
				top: 0;
			}
			.prize_step1_num_number_wrap{
				width: 2.4rem;
				height: 100%;
				position: absolute;
				top: 0;
				left: 1.49rem;
				.prize_step1_num_number{
					height: 0.33rem;
					position: relative;
					float: left;
					margin: 0rem 0.02rem;
				}
			}
			
		}
	}
}


// 第二阶段
.phased2.body{
	.bear_wrap{
		display: block;
	}
	.prize_wrap{
		display: block;
	}
	.backtime_wrap{
		display: block;
		width: 6.07rem;
		height: 3.44rem;
		position: absolute;
		left: 50%;
		margin-left: -3.035rem;
		top: 1rem;
		background-image: url(../img/step2/time_bg.png);
		.backtime_hour,.backtime_min,.backtime_sec{
			width: 1.05rem;
			height: 0.75rem;
			position: absolute;
			top: 1.3rem;
			.backtime_num{
				position: relative;
				height: 100%;
			}
			.backtime_num1{
				float: left;
			}
			.backtime_num2{
				float: right;
			}
		}
		.backtime_hour{
			left: 0.38rem;
		}
		.backtime_min{
			left: 2.45rem;
		}
		.backtime_sec{
			left: 4.5rem;
		}
	}
}

// 第三阶段
.phased3.body{
	.photo{
		display: block;
	}
	.bear_wrap{
		display: block;
	}
	.prize_wrap{
		display: block;
	}
}

// 第四阶段
.phased4.body{
	height: 36.1rem;
	.photo{
		display: block;
	}
	.prize_wrap{
		display: block;
		top: 23.3rem;
	}
	.prizer_wrap{
		display: block;
		width: 6.48rem;
		height: 8.56rem;
		position: absolute;
		left: 50%;
		margin-left: -3.24rem;
		top: 14rem;
		background-image: url(../img/step4/prizer_bg.png);
		.prizer_camera,.prizer_erji,.prizer_naifen,.prizer_xinglixiang{
			position: absolute;
			left: 50%;
			span{
				font-family: 'fzcy';
				color: #c81623;
			}
		}
		.prizer_camera{
			width: 2.8rem;
			height: 0.5rem;
			margin-left: -1.4rem;
			top: 2rem;
			font-size: 0.3rem;
			span{
				float: left;
				padding: 0.05rem;
			}
		}
		.prizer_erji{
			width: 2.8rem;
			height: 0.9rem;
			margin-left: -1.4rem;
			top: 3.5rem;
			font-size: 0.28rem;
			span{
				float: left;
				padding: 0.05rem;
			}
		}
		.prizer_naifen{
			width: 4.66rem;
			height: 0.9rem;
			margin-left: -2.33rem;
			top: 5.15rem;
			font-size: 0.24rem;
			span{
				float: left;
				transform: scale(0.9,0.9);
				padding: 0.05rem;
			}
		}
		.prizer_xinglixiang{
			width: 3.94rem;
			height: 0.5rem;
			margin-left: -1.97rem;
			top: 7.2rem;
			font-size: 0.26rem;
			span{
				float: left;
				padding: 0.07rem;
			}
		}
	}
}


// 注册
.register_wrap{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3100;
	background-image: url(../img/register/bg.jpg);
	img{
		position: absolute;
		height: auto;
	}
	.register_from_wrap{
		width: 5.03rem;
		height: 7.4rem;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		.register_title{
			width: 4.59rem;
			left: 50%;
			margin-left: -2.295rem;
			top: 0;
		}
		.input_wrap{
			width: 4.91rem;
			height: 1.56rem;
			position: absolute;
			top: 3.47rem;
			left: 0rem;
			background-image: url(../img/register/from_bg.png);
			.tel_input,.msg_input{
				position: absolute;
				outline: none;
				border: none;
				background-color: transparent;
				font-size: 0.28rem;
				color: #fff;
				box-sizing: border-box;
				padding: 0.05rem;
			}
			.tel_input{
				width: 4rem;
				height: 0.5rem;
				top: 0.05rem;
				left: 0.7rem;
			}
			.msg_input{
				width: 2.1rem;
				height: 0.48rem;
				top: 0.96rem;
				left: 0.7rem;
			}
			.getcode{
				display: block;
				color: #c12927;
				text-align: center;
				width: 1.78rem;
				height: 0.5rem;
				position: absolute;
				top: 0.95rem;
				right: 0.05rem;
				line-height: 0.5rem;
				font-size: 0.24rem;
			}
		}
		.register_checkbox{
			height: 0.39rem;
			width: auto;
			left: 0.5rem;
			bottom: 1.44rem;
		}
		.register_text{
			width: 3.26rem;
			left: 1rem;
			bottom: 1.5rem;
		}
		.register_back,.register_submit{
			height: 0.73rem;
			width: auto;
			bottom: 0;
		}
		.register_back{
			left: 0rem;
		}
		.register_submit{
			right: 0rem;
		}
		.rule_btn{
			display: block;
			width: 1.5rem;
			height: 0.25rem;
			position: absolute;
			opacity: 0;
			bottom: 1.5rem;
			left: 2.8rem;
		}
	}
	
}

// 规则
.rule_wrap{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3200;
	background-color: #b52d2c;
	.rule_cover_wrap{
		width: 6.77rem;
		height: 10.49rem;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		.rule_cover{
			width: 6.77rem;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.close_rule_btn{
		width: 0.5rem;
		position: absolute;
		top: 0.5rem;
		right: 0.25rem;
		z-index: 3200;
	}
	
}

.model_wrap{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 3100;
	top: 0;
	left: 0;
	overflow: hidden;
	background-color: #9b2421;
	.model_cover{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	.model_save{
		width: 1.67rem;
		position: absolute;
		left: 50%;
		margin-left: -0.835rem;
		bottom: 3.8rem;
		pointer-events: none;
	}
	.close_model_btn{
		position: absolute;
		width: 0.5rem;
		top: 0.5rem;
		right: 0.25rem;
		z-index: 3200;
		
	}
}

// 预览图片
.preview{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: rgba(0,0,0,.5);
	.close_preview{
		width: 0.5rem;
		top: 0.5rem;
		right: 0.5rem;
		position: absolute;
		z-index: 3200;
	}
	.preview-container{
		width: 100%;
		height: 100%;
		.preview-wrapper{
			width: 100%;
			height: 100%;
			.preview-slide{
				width: 100%;
				height: 100%;
				position: relative;
				.preview_img{
					width: 100vw;
					height: 100vw;
					object-fit: contain;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}
	}
}


// x
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	.video_wrap {
		.video_play{
			bottom: 3rem;
		}
	}
	
}
// xr
 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){
	 .video_wrap {
	 	.video_play{
	 		bottom: 3rem;
	 	}
	 }
 }
 // xmax
 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
	 .video_wrap {
	 	.video_play{
	 		bottom: 3rem;
	 	}
	 }
 }